<template>
  <div class="trace-container">
    <!-- 表单区域 -->
    <van-form @submit="submitForm" ref="form" class="form-container">
      <van-field
        v-model="form.traceOrderContent"
        label="跟进内容"
        rows="3"
        type="textarea"
        placeholder="请输入跟进内容"
        required
      />
      <van-field
        v-model="form.renewalEndTime"
        label="下次跟进时间"
        placeholder="请下次跟进时间"
        @click="renewalEndTimeFlag = true"
      />
      <van-calendar
        v-model="renewalEndTimeFlag"
        @confirm="onConfirm($event, 'renewalEndTimeFlag', 'renewalEndTime')"
      />
      <div class="action-buttons">
        <van-button
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="status = '0'"
          >取消</van-button
        >
        <van-button
          type="info"
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="status = '1'"
          >提交</van-button
        >
      </div>
    </van-form>

    <!-- 跟进记录区域 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>跟进记录</span>
      </div>
      <el-timeline class="card-body">
        <el-timeline-item
          v-for="trace in traceList"
          :key="trace.traceId"
          :timestamp="trace.traceOrderTime"
        >
          <div style="word-wrap: break-word">
            {{ trace.traceOrderContent }}
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { getOrderTraceListNotPage, addTrace } from "@/api/crm/trace";

export default {
  name: "Trace",
  data() {
    return {
      form: {
        traceOrderContent: "",
        traceOrderNextTime: "",
      },
      traceList: [],
      renewalEndTimeFlag: false,
      orderId: ''
    };
  },
  created() {
    this.orderId = this.$route.params.orderId;
    this.getData();
  },
  methods: {
    cancel() {
      this.reset();
      this.$toast("已取消");
    },
    getData() {
      getOrderTraceListNotPage({ orderId: this.orderId }).then(
        (res) => {
          this.traceList = res.data;
        }
      );
    },
    reset() {
      this.form.traceOrderContent = "";
      this.form.traceOrderNextTime = "";
    },
    submitForm() {
      if (this.form.traceOrderContent) {
        this.form.orderId = this.orderId;
        addTrace(this.form).then(() => {
          this.$toast.success("新增成功");
          this.getData();
          this.reset();
        });
      } else {
        this.$toast.fail("请填写完整信息");
      }
    },
    onConfirm(event, flag, field) {
      this[flag] = false;
      this.form[field] = this.parseTime(event, "{y}-{m}-{d}");
    },
  },
};
</script>

<style scoped>
.trace-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.form-container {
  padding: 16px;
  background-color: white;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.box-card {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;         
}

.card-body {
  flex-grow: 1;        
  min-height: 0;
}
</style>
